<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ arr.length }}</strong></span
    >
    <ul class="filters">
      <li @click="isAll('all')">
        <a :class="{ selected: isC === 'all' }" href="javascript:;">全部</a>
      </li>
      <li @click="isAll('isCom')">
        <a :class="{ selected: isC === 'isCom' }" href="javascript:;">未完成</a>
      </li>
      <li @click="isAll('com')">
        <a :class="{ selected: isC === 'com' }" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button @click="clearFn" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["arr"],
  data() {
    return {
      isC: "all",
    };
  },
  methods: {
    isAll(isAll) {
      this.isC = isAll;
      this.$emit("change", isAll);
    },
    clearFn() {
      this.$emit("clearlist");
    },
  },
};
</script>